<template>
    <view class="login-content">
        <uv-form labelPosition="left" :model="model1" ref="form" :rules="rules">
            <uv-form-item labelWidth="200" label="用户名" prop="loginForm.account" borderBottom>
                <uv-input v-model="model1.loginForm.account" border="none" placeholder="请输入用户名">
                </uv-input>
            </uv-form-item>
            <uv-form-item labelWidth="200" label="密码" prop="loginForm.password" borderBottom>
                <uv-input v-model="model1.loginForm.password" border="none" placeholder="请输入密码">
                </uv-input>
            </uv-form-item>
            <uv-button type="primary" text="登录" customStyle="margin-top: 10px" @click="submit"></uv-button>
        </uv-form>
    </view>
</template>
  
<script setup>
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from "vue";
import commonApi from "@/api/modules/common.js"
// import { onLoad, onShow } from "@dcloudio/uni-app"
const { login } = commonApi()
const { proxy } = getCurrentInstance();

const state = reactive({
    model1: {
        loginForm: {
            account: "",
            password: ""
        }
    },
    rules: {
        'loginForm.account': {
            type: 'string',
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
        },
        'loginForm.password': {
            type: 'string',
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
        },
    },
})
// 提交
const submit = () => {
    form.value.validate().then(async validate => {
        const params = {
            ...state.model1.loginForm,
            type: 1,
        }
        const [err, res] = await proxy.awaitCatch(login(params))
        if (err) return
        uni.switchTab({
            url: '/pages/index/index',
        })

    }).catch(errors => {
        uni.switchTab({
            url: '/pages/index/index',
        })
    })
}
const form = ref()
const { model1, rules } = toRefs(state)

</script>
  
<style>
.login-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
</style>
  